<template>
  <teleport to="body">
    <transition name="list-fade">
      <div class="playlist" v-show="visible && playList.length" @click="hide">
        <div class="list-wrapper" @click.stop="">
          <div class="list-header">
            <h1 class="title">
              <i class="icon" :class="modeIcon" @click.stop="changeMode"></i>
              <span class="text">{{ modeText }}</span>
              <span class="clear" @click="showConfirm">
                  <i class="icon-clear"></i>
              </span>
            </h1>
          </div>
          <Scroll class="list-content" ref="scrollRef">
            <transition-group name="list" tag="ul" ref="listRef">
              <li class="item" v-for="song in playList" :key="song.id" @click="selectItem(song)">
                <i class="current" :class="getCurrentIcon(song)"></i>
                <span class="text">{{ song.name }}</span>
                <span class="favorite" @click.stop="toggleFavorite(song)">
                  <i :class="getFavoriteIcon(song)"></i>
                </span>
                 <span
                  class="delete"
                  @click.stop="removeSong(song)"
                >
                  <i class="icon-delete"></i>
                </span>
              </li>
            </transition-group>
          </Scroll>
           <div class="list-add">
            <div class="add" @click="showAddSong">
              <i class="icon-add"></i>
              <span class="text">添加歌曲到队列</span>
            </div>
          </div>
          <div class="list-footer" @click.stop="hide">
            <span>关闭</span>
          </div>
        </div>
        <Confirm text="是否清空播放列表" confirmBtnText="清空" ref="confirmRef" @confirm="confirmClear"></Confirm>
        <addSong ref="addSongRef"></addSong>
      </div>
    </transition>
  </teleport>
</template>
<script>
import Scroll from '@/components/base/scroll/scroll.vue'
import Confirm from '@/components/base/confirm/confirm.vue'
import addSong from '@/components/add-song/add-song.vue'
import { computed, ref, nextTick } from 'vue'
import { useStore } from 'vuex'
import useMode from './use-mode'
import useFavorite from './use-favorite'
export default {
  components: {
    Scroll,
    Confirm,
    addSong
  },
  setup () {
    const store = useStore()
    const scrollRef = ref(null)
    const listRef = ref(null)
    const addSongRef = ref(null)
    const confirmRef = ref(null)
    const visible = ref(false)
    const playList = computed(() => store.state.playList)
    const sequenceList = computed(() => store.state.sequenceList)
    const currentSong = computed(() => store.getters.currentSong)

    // show供外部使用
    function show () {
      visible.value = true
      nextTick(() => {
        scrollRefresh()
        scrollToCurrent()
      })
    }
    function hide () {
      visible.value = false
    }
    function getCurrentIcon (song) {
      if (song.id === currentSong.value.id) {
        return 'icon-play'
      }
    }
    function scrollRefresh () {
      scrollRef.value.scroll.scroll._value.refresh()
    }
    function scrollToCurrent () {
      const index = playList.value.findIndex((item) => {
        return item.id === currentSong.value.id
      })
      const target = listRef.value.$el.children[index]
      scrollRef.value.scroll.scroll._value.scrollToElement(target, 300)
    }
    function selectItem (song) {
      const index = playList.value.findIndex((item) => {
        return item.id === song.id
      })
      store.commit('setCurrentIndex', index)
      store.commit('setPlayingState', true)
      const target = listRef.value.$el.children[index]
      scrollRef.value.scroll.scroll._value.scrollToElement(target, 300)
    }
    function removeSong (song) {
      store.dispatch('removeSong', song)
    }
    function showConfirm () {
      confirmRef.value.show()
    }
    function confirmClear () {
      store.dispatch('clearSongList')
      hide()
    }
    function showAddSong () {
      addSongRef.value.show()
    }

    // hook
    const { modeIcon, modeText, changeMode } = useMode()
    const { getFavoriteIcon, toggleFavorite } = useFavorite()

    return {
      scrollRef,
      addSongRef,
      listRef,
      confirmRef,
      visible,
      playList,
      sequenceList,
      currentSong,
      modeIcon,
      modeText,
      getFavoriteIcon,
      toggleFavorite,
      changeMode,
      hide,
      show,
      getCurrentIcon,
      showAddSong,
      confirmClear,
      showConfirm,
      removeSong,
      selectItem,
      scrollToCurrent
    }
  }
}
</script>
<style lang="scss" scoped>
.playlist {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  background-color: $color-background-d;
  &.list-fade-enter-active,
  &.list-fade-leave-active {
    transition: all 0.3s;
    .list-wrapper {
      transition: all 0.3s;
    }
  }
  &.list-fade-enter-from,
  &.list-fade-leave-to {
    opacity: 0;
    .list-wrapper {
      transform: translate3d(0, 100%, 0);
    }
  }
  .list-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 210;
    width: 100%;
    background-color: $color-highlight-background;
    .list-header {
      position: relative;
      padding: .852878rem 1.279318rem .426439rem .852878rem;
      .title {
        display: flex;
        align-items: center;
        .icon {
          margin-right: .426439rem;
          font-size: 1.023454rem;
          color: $color-theme-d;
        }
        .text {
          flex: 1;
          font-size: $font-size-medium;
          color: $color-text-l;
        }
        .clear {
            @include extend-click();
            .icon-clear {
              font-size: $font-size-medium;
              color: $color-text-d;
            }
          }
      }
    }
    .list-content {
      max-height: 10.234542rem;
      overflow: hidden;
      .item {
        display: flex;
        align-items: center;
        height: 1.705757rem;
        padding: 0 1.279318rem 0 .852878rem;
        overflow: hidden;
        .current {
          flex: 0 0 .852878rem;
          width: .852878rem;
          font-size: $font-size-small;
          color: $color-theme-d;
        }
        .text {
          flex: 1;
          @include no-wrap();
          font-size: $font-size-medium;
          color: $color-text-d;
        }
        .favorite {
          @include extend-click();
          margin-right: .639659rem;
          font-size: $font-size-small;
          color: $color-theme;
          .icon-favorite {
            color: $color-sub-theme;
          }
        }
        .delete {
            @include extend-click();
            font-size: $font-size-small;
            color: $color-theme;
            &.disable {
            color: $color-theme-d;
            }
        }
      }
    }
    .list-add {
        width: 5.970149rem;
        margin: .852878rem auto 1.279318rem auto;
        .add {
          display: flex;
          align-items: center;
          padding: .341151rem .682303rem;
          border: .042644rem solid $color-text-l;
          border-radius: 4.264392rem;
          color: $color-text-l;
          .icon-add {
            margin-right: .21322rem;
            font-size: $font-size-small-s;
          }
          .text {
            font-size: $font-size-small;
          }
        }
      }
    .list-footer {
      text-align: center;
      line-height: 2.132196rem;
      background: $color-background;
      font-size: $font-size-medium-x;
      color: $color-text-l;
    }
  }
}
</style>
